import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/platform/platform_detector.dart';

/// 响应式搜索栏组件
class ResponsiveSearchBar extends ConsumerStatefulWidget {
  final ValueChanged<String>? onSubmitted;
  final VoidCallback? onFilterPressed;
  final String hintText;

  const ResponsiveSearchBar({
    super.key,
    this.onSubmitted,
    this.onFilterPressed,
    this.hintText = '搜索...',
  });

  @override
  ConsumerState<ResponsiveSearchBar> createState() => _ResponsiveSearchBarState();
}

class _ResponsiveSearchBarState extends ConsumerState<ResponsiveSearchBar> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 桌面平台显示完整搜索栏
    if (PlatformDetector.isDesktop() || PlatformDetector.isWeb()) {
      return _buildDesktopSearchBar();
    } else {
      // 移动平台显示简化搜索栏
      return _buildMobileSearchBar();
    }
  }

  /// 构建桌面搜索栏
  Widget _buildDesktopSearchBar() {
    return Container(
      height: 40,
      constraints: const BoxConstraints(maxWidth: 400),
      decoration: BoxDecoration(
        color: Theme.of(context).cardColor,
        borderRadius: BorderRadius.circular(8),
        border: Border.all(
          color: Theme.of(context).dividerColor,
        ),
      ),
      child: Row(
        children: [
          const SizedBox(width: 12),
          const Icon(Icons.search, size: 18, color: Colors.grey),
          const SizedBox(width: 8),
          Expanded(
            child: TextField(
              controller: _controller,
              decoration: InputDecoration(
                hintText: widget.hintText,
                border: InputBorder.none,
                contentPadding: const EdgeInsets.symmetric(vertical: 12),
                isDense: true,
              ),
              onSubmitted: widget.onSubmitted,
            ),
          ),
          if (widget.onFilterPressed != null) ...[
            Container(
              height: 24,
              width: 1,
              color: Theme.of(context).dividerColor,
            ),
            IconButton(
              icon: const Icon(Icons.filter_list, size: 18),
              onPressed: widget.onFilterPressed,
              padding: const EdgeInsets.symmetric(horizontal: 8),
              constraints: const BoxConstraints(),
            ),
          ],
          const SizedBox(width: 4),
        ],
      ),
    );
  }

  /// 构建移动搜索栏
  Widget _buildMobileSearchBar() {
    return Container(
      height: 36,
      decoration: BoxDecoration(
        color: Theme.of(context).cardColor,
        borderRadius: BorderRadius.circular(6),
        border: Border.all(
          color: Theme.of(context).dividerColor,
        ),
      ),
      child: Row(
        children: [
          const SizedBox(width: 8),
          const Icon(Icons.search, size: 16, color: Colors.grey),
          const SizedBox(width: 6),
          Expanded(
            child: TextField(
              controller: _controller,
              decoration: InputDecoration(
                hintText: widget.hintText,
                border: InputBorder.none,
                contentPadding: const EdgeInsets.symmetric(vertical: 10),
                isDense: true,
                hintStyle: const TextStyle(fontSize: 14),
              ),
              style: const TextStyle(fontSize: 14),
              onSubmitted: widget.onSubmitted,
            ),
          ),
          if (widget.onFilterPressed != null)
            IconButton(
              icon: const Icon(Icons.filter_list, size: 16),
              onPressed: widget.onFilterPressed,
              padding: const EdgeInsets.symmetric(horizontal: 4),
              constraints: const BoxConstraints(),
            ),
          const SizedBox(width: 4),
        ],
      ),
    );
  }
}